What is swiper?
The swiper npm package is a modern touch slider with hardware accelerated transitions. It is intended for use in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper is designed to be used in a mobile environment, where touch interactions are fundamental. It provides a number of features like swiping, multiple slides per view, vertical slides, and more.
What are swiper's main functionalities?
Basic Swiper
This code initializes a basic Swiper instance with horizontal direction, loop mode, pagination, navigation arrows, and a scrollbar.
import Swiper from 'swiper';
const swiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
Multiple Slides Per View
This code sets up a Swiper instance where you can have multiple slides visible at the same time, with space between the slides and clickable pagination.
import Swiper from 'swiper';
const swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
Vertical Swiper
This code snippet demonstrates how to initialize a Swiper instance that allows vertical swiping with clickable pagination.
import Swiper from 'swiper';
const swiper = new Swiper('.swiper-container', {
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
Other packages similar to swiper
slick-carousel
Slick is a jQuery plugin for creating carousels that supports multiple slides, responsive layouts, and touch events. It is similar to Swiper but relies on jQuery, which might not be ideal for modern projects that do not use jQuery.
glidejs
Glide.js is a dependency-free JavaScript ES6 slider and carousel. It's lightweight, flexible and fast. Designed to slide, no less, no more. It compares to Swiper in terms of being touch-friendly and responsive, but it emphasizes simplicity and performance.
flickity
Flickity is a touch, responsive, flickable carousel library. It has features like draggable slides, group cells, and adaptive height. It is similar to Swiper but offers a different set of features and API options, focusing on being flickable and physics-based interactions.
owl-carousel
Owl Carousel is a touch-enabled jQuery plugin that lets you create a beautiful responsive carousel slider. While it offers similar functionality to Swiper, it is built on top of jQuery, which might not be suitable for projects that aim to avoid jQuery dependencies.
Swiper
Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers.
Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.
Getting Started
Dist / Build
On production use files (JS and CSS) only from dist/
folder, there will be the most stable versions, build/
folder is only for development purpose.
Development Build
Swiper uses gulp
to build a development (build) and production (dist) versions.
First you need to have gulp-cli
which you should install globally.
$ npm install --global gulp
Then install all dependencies, in repo's root:
$ npm install
And build development version of Swiper:
$ npm run build:dev
The result is available in build/
folder.
Production Build
$ npm run build:prod
Production version will available in dist/
folder.
Contributing
All changes should be committed to src/
files only. Before you open an issue please review the contributing guideline.
Swiper 3.x
If you are still using Swiper 3.x.x, you may find it in Swiper3 Branch
Swiper 2.x
If you are still using Swiper 2.x.x or you need old browsers support, you may find it in Swiper2 Branch